<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.item {
				margin: 10px;
				padding: 0 20px;
				border: 1px #f00 solid;
			}
		</style>
	</head>
	<body>
		<div id="root"></div>

		<script src="../../lib/react.development.js"></script>
		<script src="../../lib/react-dom.development.js"></script>
		<script src="../../lib/babel.min.js"></script>

		<script type="text/babel">
			 class App extends React.Component {
				 constructor() {
					 super()
					 this.state = {
						 students: [
							{ id: 111, name: 'zzt', score: 99 },
							{ id: 112, name: 'kobe', score: 98 },
							{ id: 113, name: 'james', score: 97 },
							{ id: 114, name: 'curry', score: 96 }
						 ]
					 }
				 }

				render() {
					const { students } = this.state

				 return (
					 <div>
						 <h2>学生列表数据</h2>
						 <div className="list">
							 {
								students.filter(item => item.score > 97)
									.slice(0, 1)
									.map(item => (
										<div className="item" key={item.id}>
											<h2>学号：{ item.id }</h2>
											<h2>姓名：{ item.name }</h2>
											<h2>分数：{ item.score }</h2>
										</div>
									))
							}
						 </div>
					 </div>
				 )
				 }
			}

			const root = ReactDOM.createRoot(document.querySelector('#root'))
			root.render(<App/>)
		</script>
	</body>
</html>
